<template>
    <div>
        <div class="container">
            <div class="cloud_header_class">
                <div class="text-center">
                    <div class="weight-text-class" style="color:rgb(239 32 31);">8个任务</div>
                    <div class="small-text-class">我的待办</div>
                </div>
                <div class="center_line_class">|</div>
                <div class="text-center">
                    <div class="weight-text-class" style="color:rgb(2 161 0);">16个任务</div>
                    <div class="small-text-class">已完成任务</div>
                </div>
                <div class="center_line_class">|</div>
                <div class="text-center">
                    <div class="weight-text-class" style="color:rgb(254 157 31);">24分钟</div>
                    <div class="small-text-class">平均任务处理时间</div>
                </div>
                <div class="center_line_class">|</div>
                <div class="text-center">
                    <div class="weight-text-class" style="color:rgb(3 172 229);">12个任务</div>
                    <div class="small-text-class">本周任务数</div>
                </div>
                <div class="center_line_class">|</div>
                <div class="text-center">
                    <div class="weight-text-class" style="color:rgb(114 114 115);">58个任务</div>
                    <div class="small-text-class">总任务数</div>
                </div>
            </div>
        </div>
        <div class="container" style="margin-top:1rem;">
            <div class="common-list-class">
                <div style="display:flex;">
                    <div class="common-title-div"></div>
                    <div class="common-title-text">云端巡查管理查询列表</div>
                    <el-button type="warning" size="mini" style="margin-left:20px;" @click="newaddClick" icon="el-icon-position">新建任务</el-button>
                </div>
                <div style="display:flex;">
                    <div>
                        <el-radio-group v-model="radioStatus" size="mini" @change="radioStatusChange">
                            <el-radio-button label="全部"></el-radio-button>
                            <el-radio-button label="进行中"></el-radio-button>
                            <el-radio-button label="等待中"></el-radio-button>
                        </el-radio-group>
                    </div>
                    <div style="margin-left:20px;">
                        <el-input placeholder="请输入查询条件" style="width:300px;" size="mini" prefix-icon="el-icon-search" v-model="queryName"></el-input>
                    </div>
                    
                </div>
            </div>
            <!-- 查询列表 -->
            <el-table :data="tableData" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%;margin-top:10px;margin-bottom:10px;" max-height="550" border>
                <el-table-column prop="zt" label="主题"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="nr"  label="内容"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="xcr"  label="巡查人"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="xfr"  label="下发人"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="xfsj"  label="下发时间"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="jzsj" label="截止时间"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="zxzt" label="执行状态"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="sfjj" label="是否紧急"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="300" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" icon="el-icon-tickets" @click="detailsClick(scope.row)">详情</el-button>
                        <el-button type="success" size="mini" icon="el-icon-video-play" @click="detailsClick(scope.row)">审核</el-button>
                        <el-button type="warning" size="mini" icon="el-icon-refresh-left" @click="detailsClick(scope.row)">撤销</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-row type="flex" justify="end">
                    <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                    </el-pagination>
            </el-row>
        </div>
    </div>
</template>

<script>
import mixin from '@/mixin/mixin.js'; 
    export default {
        name: 'logmanagement',
        mixins: [mixin],
        data(){
            return {
                queryName:'',
                radioStatus:'全部',
                pageSizes:[10, 15, 50, 100],
                pagesize:10,
                total:10,
                currentPage:1,
                tableData: [{
                    zt:'位置巡查',
                    nr:'食堂安全卫生检查',
                    xcr:'张三',
                    xfr:'夏双方',
                    xfsj:'2020-04-12',
                    jzsj:'2020-04-13',
                    zxzt:'执行中',
                    sfjj:'是'
                }],
                searchObj:{},
            }
        },
        created(){
            // this.query();
        },
        methods: {
            newaddClick(){

            },
            radioStatusChange(value){

            },
            tableHeaderColor({row,column,rowIndex,columnIndex}){
                return 'background-color:#f5f5f5;color:#626262;'
            },
            rowStyle({ row, rowIndex}){
                let style1 = {};
                let style2 = {};
                if(rowIndex%2 == 0){
                    style1.background = '#ffffff';
                    return style1
                }else{
                    style2.background = '#f5f5f5';
                    return style2
                }
            },
            query() {
                return;
              let params = {
                  nickName:this.searchObj.nickName,
                  pageNumber:this.currentPage,
                  pageSize:this.pagesize
              }
              this.showLoading();
              this.$axios({
                    method: 'get',
                    url: `/log/selectLogsByPage`,
                    headers:{
                        Authorization:this.requestToken 
                    },
                    data: params,
                    params:params
                }).then(res => {
                    this.hideLoading();
                    console.log('res---->:',res);
                    if(res.data.code == '20000'){
                        this.tableData = res.data.data.list;
                        this.pagesize = res.data.data.pageSize;
                        this.currentPage = res.data.data.pageNum;
                        this.total = res.data.data.total;
                    }else{
                        this.$message({
                            message:res.data.message,
                            type:'error'
                        })
                    }
                }).catch(err => {
                    this.hideLoading();
                    this.$message({
                        message:err,
                        type:'error'
                    })
                })
            },
            // 点击分页当前页多少数据
            handleSizeChange(val){
                this.pagesize = val;
                this.query();
            },
            // 点击分页页数
            handleCurrentChange(val){
                this.currentPage = val;
                this.query();
            },
            //  重置
            reset(){
                this.searchObj = {};
                this.query();
            }
        }
    }
</script>
<style scoped>
  .common-title-flex{
      display:flex;
  }
  .common-title-div{
      width:3px;
      height:16px;
      background-color:#368af7;
      margin-top:2px;
  }
  .common-title-text{
      margin-left:4px;
      font-size: 14px;
  }
  .common-list-class{
      display:flex;
      justify-content:space-between;
      margin-top:-10px;
  }
  .upload-file >>> .el-upload--text{
      border:none;
      width: 100px;
      height: 36px;
  }
  .cloud_header_class{
      display: flex;
      justify-content: space-around;
      align-items: center;
  }
  .text-center{
      text-align:center;
  }
  .small-text-class{
      font-size: 12px;
      transform: scale(0.8);
      color: rgb(98 98 98);
  }
  .weight-text-class{
      font-weight: bold;
  }
  .center_line_class{
      color: rgb(235 235 235);
  }
</style>>